<template>
  <div class="content">
    <!-- head -->
    <Head></Head>
    <!-- mainContent -->
    <div class="mainbox">
        <el-row>
          <el-col :span=6>
          <!--  一、基本信息  -->
            <div class="leftside" v-show="activeNum==0">
              <!-- 1.1、柱状图部分 -->
              <div class="part1">
                <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;">
                  <div class="alltitle">师生概况</div>
                </div>
                <div id="chart" style="width: 22.4vw; height: 25vh"></div>
              </div>
              <!-- 1.2、饼图部分 -->
              <div class="part2">
                <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;">
                  <div style="float: right; color: rgb(255, 255, 255, 0.7); font-size: 0.01rem; border-radius: 0.05rem;
                    width: 0.5rem; height: 0.21rem; line-height: 0.18rem;  border: 0.02rem #1BB3D9 solid;"
                  >
                    &nbsp;{{ thisyear }}&nbsp;
                  </div>
                  <div class="alltitle">师生占比</div>
                </div>
                <div style="width: 12vw; height: 19vh; margin: 2% 0">
                    <!-- 饼图 -->
                    <el-row :span=8>
                      <div class="circular"></div>
                      <div id="pie"  style="width: 12vw; height: 19vh;margin: -0.05rem 0 0 -0.25rem;position: absolute;"></div>
                      <div class="circular1">
                        <img src="../../assets/images/user.png" style="width: 0.55rem; height: 0.55rem; margin: 0.1rem 0.12rem" />
                      </div>
                    </el-row>
                    <!-- 饼图label -->
                    <el-row :span=16>
                      <div class="pielabel" style="width: 70%; height: 100%;position: absolute;margin: 0.25rem 0 0 2.2rem;">
                      <!-- 学生 -->
                        <div class="labelbox" style="width: 100%; height: 100%; margin: 0.03rem 0 0 0; 
                          border-top: 0.02rem rgb(24, 185, 177,1) solid;"
                        >
                          <div style="float: left;background-color: rgb(24, 185, 177, 1); height: 0.35rem; width: 0.9rem;
                            color: white;text-align: center;line-height: 0.3rem;margin-top: 0.07rem;font-size: 0.19rem; " >
                            学生人数
                          </div>
                          <div style="float: left;color: rgb(24, 185, 177);font-size: 0.01rem;margin-top: 0.01rem;
                            font-weight: bold;text-align: right;width: 45%;">
                            {{ thisStu }}人
                            <div style="color: rgb(24, 185, 177)">{{Math.round((thisStu / (thisStu + thisTeather)) * 100)}}%
                            </div>
                          </div>
                        </div>
                      <!-- 教师 -->
                        <div class="labelbox" style="width: 100%; height: 0.45rem; margin: 0.7rem 0 2rem 0; 
                          border-bottom: 0.02rem rgb(98, 73, 185, 1) solid;"
                        >
                          <div style="float: left;background-color: rgb(98, 73, 185, 1); height: 0.35rem; width: 0.9rem;
                            color: white;text-align: center;line-height: 0.3rem;font-size: 0.19rem; " >
                            教师人数
                          </div>
                          <div style="float: left;color: rgb(98, 73, 185);font-size: 0.01rem;margin-top: -0.07rem;
                            font-weight: bold;text-align: right;width: 45%;">
                            {{ thisTeather }}人
                            <div style="color: rgb(98, 73, 185)">{{Math.round((thisTeather / (thisStu + thisTeather)) * 100)}}%
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-row>
                </div>
              </div>
              <!-- 1.3、面积图部分 -->
              <div class="part3">
                <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.27rem;">
                  <div style="float: right; color: rgb(255, 255, 255, 0.7); font-size: 0.01rem; border-radius: 0.05rem;
                    width: 0.7rem; height: 0.21rem; line-height: 0.17rem;border: 0.02rem #1BB3D9 solid;text-align: center;"
                  >
                    &nbsp;{{ thismajor }}&nbsp;
                  </div>
                  <div class="alltitle">课程情况</div>
                </div>
                <div id="category" style="width: 22.4vw; height: 30vh"></div>
              </div>
            </div>
          <!--  二、师资力量  -->
            <div class="leftside" v-show="activeNum==1">
              <!-- 2.1、学历部分 -->
              <div class="part1">
                <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;">
                  <div class="alltitle">教师学历</div>
                </div>
                <div style="width: 22.4vw; height: 25vh">
                  <el-row>
                    <el-col :span="8">
                      <div>
                        <div class="teachertype1">{{postgraduate}}</div>
                        <img src="../../assets/images/bluebg.png" style="width:1.2rem;height:1.1rem;margin: -0.45rem 0 0 0.2rem;">
                        <div style="color:#fff;margin-left:0.42rem">研究生人数</div>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div>
                        <div class="teachertype2">{{undergraduate}}</div>
                        <img src="../../assets/images/redbg.png" style="width:1.2rem;height:1.1rem;margin: -0.45rem 0 0 0.2rem;">
                        <div style="color:#fff;margin-left:0.42rem">本科生人数</div>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div>
                        <div class="teachertype3">{{juniorgraduate}}</div>
                        <img src="../../assets/images/greenbg.png" style="width:1.2rem;height:1.1rem;margin: -0.45rem 0 0 0.2rem;">
                        <div style="color:#fff;margin-left:0.42rem">大专生人数</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <!-- 2.2、出勤部分 -->
              <div class="part2" style="margin-top:-0.7rem">
                <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;">
                  <div class="alltitle">出勤概况</div>
                </div>
                <div>
                  <!-- 图例 -->
                  <el-row>
                    <el-col :span="12">
                      <div class="circular2"></div>
                      <div id="pie2" style="width: 16vw; height: 20vh;margin: 0.1rem 0 0 -0.63rem;position: absolute;"></div>
                      <div class="circular3">
                        <img src="../../assets/images/kaoqing.png" style="width: 0.65rem; height: 0.65rem; margin: 0.24rem 0.25rem" />
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div style="width:2.67rem;height:2rem;margin: -0.1rem 0 0 2rem;">
                        <div style="margin:0.1rem;float: left;text-align: center;margin-left: 0.4rem;">
                          <div style="float:left;width: 0.7rem;height: 0.3rem;margin: 0.1rem 0;"
                           :class="showindex == 0 ? 'activeindex':'nomalindex'">本月</div>
                          <div style="float:left;width: 0.7rem;height: 0.3rem;margin: 0.1rem 0;"
                           :class="showindex == 1 ? 'activeindex':'nomalindex'">本季</div>
                          <div style="float:left;width: 0.7rem;height: 0.3rem;margin: 0.1rem 0;"
                           :class="showindex == 2 ? 'activeindex':'nomalindex'">本年</div>
                        </div>
                        <div style="width:1.6rem;height:1.37rem;float: left;margin-top: 0.01rem;border-top: 0.02rem #03FFB1 solid;
                        border-bottom: 0.02rem #FF5A66 solid;margin-left: 0.4rem;">
                            <div style="margin-top:0.06rem">
                              <div style="margin-bottom:0.15rem;width: 0.5rem;height: 0.3rem;
                              background-color:rgb(3,255,177,.69);color:#fff;text-align: center;line-height: 0.27rem;">满勤
                              </div>
                              <div style="color:#03FFB1;float:right;margin-top: -0.48rem;text-align: right;">{{this.thisFullAttendance}}人
                                <div style="color:#03FFB1;margin-top: -0.05rem;">{{Math.round((thisFullAttendance / (thisFullAttendance + thisLate + thisLeaveEarly)) * 100)}}%</div>
                              </div>
                            </div>
                            <div>
                              <div style="margin-bottom:0.15rem;width: 0.5rem;height: 0.3rem;
                              background-color:#F8B700;color:#fff;text-align: center;line-height: 0.27rem;">迟到
                              </div>
                              <div style="color:#FEDE7F;float:right;margin-top: -0.48rem;text-align: right;">{{this.thisLate}}人
                                <div style="color:#FEDE7F;margin-top: -0.05rem;">{{Math.round((thisLate / (thisFullAttendance + thisLate + thisLeaveEarly)) * 100)}}%</div>
                              </div>
                            </div>
                            <div>
                              <div style="width: 0.5rem;height: 0.3rem;background-color:#FF5A66;
                              color:#fff;text-align: center;line-height: 0.28rem;">早退
                              </div>
                              <div style="color:#FF5A66;float:right;margin-top: -0.34rem;text-align: right;">{{this.thisLeaveEarly}}人
                                <div style="color:#FF5A66;margin-top: -0.05rem;">{{Math.round((thisLeaveEarly / (thisFullAttendance + thisLate + thisLeaveEarly)) * 100)}}%</div>
                              </div>
                            </div>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <!-- 动态表格 -->
                  <div>
                    <ScrollTable></ScrollTable>
                  </div>
                </div>
              </div>
            </div>
          <!-- 招生信息 -->
            <div class="leftside" v-show="activeNum==2">
            <!-- 男女比例 -->
              <div class="part1">
                <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;">
                  <div class="alltitle">男女比例</div>
                </div>
                <div style="width: 12vw; height: 19vh; margin: 2% 0">
                    <!-- 饼图 -->
                    <el-row :span=8>
                      <div class="circular"></div>
                      <div id="pie3"  style="width: 12vw; height: 19vh;margin: -0.05rem 0 0 -0.25rem;position: absolute;"></div>
                      <div class="circular1">
                        <img src="../../assets/images/user.png" style="width: 0.55rem; height: 0.55rem; margin: 0.1rem 0.12rem" />
                      </div>
                    </el-row>
                    <!-- 饼图label -->
                    <el-row :span=16>
                      <div class="pielabel" style="width: 70%; height: 100%;position: absolute;margin: 0.25rem 0 0 2.2rem;">
                      <!-- 男生 -->
                        <div class="labelbox" style="width: 100%; height: 100%; margin: 0.03rem 0 0 0; 
                          border-top: 0.02rem rgb(24, 185, 177,1) solid;"
                        >
                          <div style="float: left;background-color: rgb(24, 185, 177, 1); height: 0.35rem; width: 0.9rem;
                            color: white;text-align: center;line-height: 0.3rem;margin-top: 0.07rem;font-size: 0.19rem; " >
                            男生人数
                          </div>
                          <div style="float: left;color: rgb(24, 185, 177);font-size: 0.01rem;margin-top: 0.01rem;
                            font-weight: bold;text-align: right;width: 45%;">
                            {{ men }}人
                            <div style="color: rgb(24, 185, 177)">{{Math.round((men / (men + women)) * 100)}}%
                            </div>
                          </div>
                        </div>
                      <!-- 女生 -->
                        <div class="labelbox" style="width: 100%; height: 0.45rem; margin: 0.7rem 0 2rem 0; 
                          border-bottom: 0.02rem rgb(98, 73, 185, 1) solid;"
                        >
                          <div style="float: left;background-color: rgb(98, 73, 185, 1); height: 0.35rem; width: 0.9rem;
                            color: white;text-align: center;line-height: 0.3rem;font-size: 0.19rem; " >
                            女生人数
                          </div>
                          <div style="float: left;color: rgb(98, 73, 185);font-size: 0.01rem;margin-top: -0.07rem;
                            font-weight: bold;text-align: right;width: 45%;">
                            {{ women }}人
                            <div style="color: rgb(98, 73, 185)">{{Math.round((women / (women + men)) * 100)}}%
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-row>
                </div>
              </div>
            <!-- 年纪人数  -->
              <div class="part2">
                <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;">
                  <div class="alltitle">年纪人数</div>
                </div>
                <div id="bar" style="width: 22.4vw; height: 25vh"></div>
              </div>
              <!-- 生源分布  -->
              <div class="part3">
                <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;">
                  <div class="alltitle">生源分布</div>
                </div>
                <div style="width: 22.4vw; height: 32vh;overflow: hidden;">
                  <img src="../../assets/images/mapbottom.png" style="width:6.5rem;height:2.8rem;margin: 1.3rem 0 0 -1.2rem;z-index: -1;">
                  <img src="../../assets/images/map.png" style="width:2.6rem;height:2.3rem;margin: -5.9rem 0 0 0.76rem; ">
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span=12>
            <div style="height:7.75rem;">&emsp;</div>
            <div style="height:0.4rem;" class="navLink">
              <div style="width:8.35rem;height: 100%;background-color:rgb(63,146,248,.2);margin-left: 0.72rem;">
                <el-row style="text-align:center">
                <div v-for="(item,index) in navlink" :key="index" :data="navlink">
                  <el-col :span="8">
                    <div :class="activeNum == index ? 'itemactive':'itemnomal'" @click="select(index)">{{item.title}}</div>
                    <div v-if="activeNum == index" style="height: 0.02rem;background-color:#FEDE7F;margin-top: -0.02rem;width: 0.61rem;
                    margin-left: 1.09rem;">&emsp;</div>
                  </el-col>
                </div>
                </el-row>
              </div>
            </div>
            <div style="width: 100%;text-align: center; ">
              <Navbar></Navbar>
            </div>
          </el-col>
          <el-col :span=6>
          <!-- 基本信息 -->
            <div class="rightside" v-show="activeNum==0">
              <!-- school介绍部分 -->
              <div class="part4">
                <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;">
                  <div class="alltitle">校园介绍</div>
                </div>
                <div class="part4_box">
                  <el-row>
                    <el-col :span=10>
                      <img src="../../assets/images/school.jpg" style=" width: 1.7rem;height: 1.3rem;margin: 0.37rem 0 0 0.2rem;"/>  
                    </el-col>
                    <el-col :span=14>
                      <div style="color: rgb(255, 255, 255, 0.8);height: 1.4rem;margin: 0.32rem 0 0 0.2rem;width: 2.1rem;
                       overflow-y: hidden;">
                        &emsp;&emsp;南充电影工业职业学院是经四川省人民政府批准、教育部备案的全日制民办普通高等院校。南充电影工业职业学院以影视技术为核心、融合动漫、数字媒体、新闻传播、影视表演、影视产业管理、艺术设计等多领域协同发展。
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <!-- liquid部分 -->
              <div class="part5">
                <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.27rem;">
                  <div class="alltitle">年纪概况</div>
                  <el-row>
                    <el-col :span=6>
                    <div style="height:1.23rem;overflow: hidden;">
                      <div id="liquidEchart" style="margin-top:0.1rem;"></div>
                    </div>
                    </el-col>
                    <el-col :span=18>
                      <div id="studntDetails" style="width: 17vw; height: 12vh;"></div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <!-- showTeacher部分 -->
              <div class="part6">
                <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;">
                  <div class="alltitle">教师风采</div>
                </div>
                <el-row :gutter="35">
                  <div v-for="item in teatherList" :key="item.index" :data="teatherList">
                      <el-col :span="8">
                         <div class="showTeacher">
                            <img src="../../assets/images/teacher.png" 
                            style="width:1rem;height:0.75rem;margin-top:0.15rem">
                         </div>
                         <div style="margin-top:-0.7rem;text-align:center;height: 0.75rem">
                          <div style="color:white">{{ item.name }}</div>
                          <div style="color:white;font-weight: 100;font-size: 0.05rem;">{{ item.position }}</div>
                          <div style="color:white;font-weight: 100;font-size: 0.05rem;">{{ item.rank  }}</div>
                         </div>
                      </el-col>
                  </div>
                </el-row>
              </div>
            </div>
          <!-- 师资力量 -->
            <div class="rightside" v-show="activeNum==1">
            <!-- 教师数量 -->
              <div class="part4">
                <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;">
                  <div class="alltitle">教师数量</div>
                </div>
                <div style="width: 22.4vw; height: 25vh">
                  <el-row>
                    <el-col :span="8">
                      <div>
                        <div class="teachertype1" style="margin-left:0.51rem">{{internship}}</div>
                        <img src="../../assets/images/bluebg.png" style="width:1.2rem;height:1.1rem;margin: -0.45rem 0 0 0.2rem;">
                        <div style="color:#fff;margin-left:0.5rem">实习教师</div>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div>
                        <div class="teachertype2">{{backbone}}</div>
                        <img src="../../assets/images/redbg.png" style="width:1.2rem;height:1.1rem;margin: -0.45rem 0 0 0.2rem;">
                        <div style="color:#fff;margin-left:0.5rem">骨干教师</div>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div>
                        <div class="teachertype3">{{superteacher}}</div>
                        <img src="../../assets/images/greenbg.png" style="width:1.2rem;height:1.1rem;margin: -0.45rem 0 0 0.2rem;">
                        <div style="color:#fff;margin-left:0.5rem">特级教师</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            <!-- 教师获奖信息 -->
              <div class="part5">
                <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;margin-top: -0.7rem;">
                  <div class="alltitle" style="width:1.3rem">教师获奖信息</div>
                </div>
                <div style="margin-top:0.18rem;">
                  <div v-for="item in awardList" :key="item.index" :data = "awardList">
                      <div style="height:1.16rem;width: 22.4vw;border-bottom: 0.01rem rgb(27,179,217,.38) solid;margin-bottom: 0.2rem;">
                        <el-row>
                          <el-col :span="8">
                            <img src="../../assets/images/teacher.png" style="width:1.3rem;height:1rem">
                          </el-col>
                          <el-col :span="16">
                            <div>
                              <div>
                                <span style="color:#fff">姓名：{{item.name}}</span>
                                <span style="color:#fff">&emsp;年龄：{{item.age}}</span>
                                <span style="color:#fff">&emsp;职称：{{item.title}}</span>
                              </div>
                              <br>
                              <div style="color:#fff;height: 0.53rem;width: 3rem;word-wrap: break-word;overflow: hidden;">
                                  获得荣誉：{{item.award}}
                              </div>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                  </div>
                </div>
              </div>
            </div>
          <!-- 招生信息 -->
            <div class="rightside" v-show="activeNum==2">
            <!-- 招生列表 -->
             <div class="part4">
                <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;">
                  <div class="alltitle">招生列表</div>
                  <div style="margin-top:0.15rem">
                      <div v-for="item in studentList" :key="item.index" :data="studentList">
                        <div class="studentList">&emsp;&emsp;{{item.name}}&emsp;{{item.area}}&emsp;{{item.gender}}&emsp;{{item.nation}}
                        &emsp;{{item.college}}&emsp;{{item.stuclass}}</div>
                      </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
    </div>
    <!-- navBar -->
    <!-- <div>
      <Navbar></Navbar>
    </div> -->
  </div>
</template>
<script>
import Navbar from "../components/Navbar";
import Head from '../components/head';
import $ from "jquery";
import "echarts-liquidfill";
import ScrollTable from './components/ScrollTable';
export default {
  components: { Navbar , Head , ScrollTable},
  data() {
    return {
      loading: false,
      stu: [699, 805, 1022, 2133, 3143, 4153, 5167],
      thisStu: "1205",
      thisTeather: "717",
      teather: [300, 450, 550, 660, 860, 970, 1690],
      year: [2016, 2017, 2018, 2019, 2020, 2021, 2022],
      thisyear: "2016",
      area: [
        [2050, 2600, 2622, 2832, 2461, 2686, 2701],
        [1130, 1420, 1200, 1180, 1434, 1689, 1214],
        [2203, 1622, 2232, 2442, 2050, 2256, 1860],
        [1318, 1538, 1816, 2326, 2614, 2714, 2826],
        [2116, 2110, 2110, 2138, 2110, 2114, 2118],
        [2428, 2012, 2632, 2835, 2617, 2720, 2530],
      ],
      major: ["摄影系", "舞蹈系", "表演系", "声乐系", "编辑系", "主持系"],
      thismajor: "摄影系",
      teatherList: [
        { name: "李老师", rank: "高级教师", position: "校长" },
        { name: "李老师", rank: "高级教师", position: "校长" },
        { name: "李老师", rank: "高级教师", position: "校长" },
        { name: "李老师", rank: "高级教师", position: "校长" },
        { name: "李老师", rank: "高级教师", position: "校长" },
        { name: "李老师", rank: "高级教师", position: "校长" },
      ],
      chartsLiquid: "", // 初始化图表
      activeNum:0,
      navlink:[
        {title:'基本信息'},
        {title:'师资力量'},
        {title:'招生信息'},
      ],
      // 师资力量
      postgraduate:32,    //研究生
      undergraduate:64,   //本科生
      juniorgraduate:12,  //大专生 
      fullAttendance:[1567,1132,667],//满勤人数(月、季、年)
      late:[121,201,330], //迟到人数
      leaveEarly:[50,100,200],  //早退人数
      thisFullAttendance:'',
      thisLate:'',
      thisLeaveEarly:'',
      showindex:0,         //三种情况展示
      internship:200,      //实习老师数量
      backbone:56,         //骨干教师
      superteacher:34,     //特级教师
      awardList:[
         {'name':'李老师','age':'26','title':'特级教师','award':'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'},
         {'name':'李老师','age':'26','title':'特级教师','award':'XXXXXXXXXXXXXXXXXXXXXX'},
         {'name':'李老师','age':'26','title':'特级教师','award':'XXXXXXXXXXXXXXXXXXXXXX'},
         {'name':'李老师','age':'26','title':'特级教师','award':'XXXXXXXXXXXXXXXXXXXXXX'},
      ],
      // 招生信息
      men:4567,
      women:5467,
      menList: [300, 450, 550, 660, 860, 970, 1690],
      womenList:  [699, 805, 1022, 2133, 3143, 4153, 5167],
      studentList:[
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
        {name:'阿湫',area:'四川',gender:'男',nation:'汉',college:'制造学院',stuclass:'制造2201'},
      ]
    };
  },
  created() {
    setTimeout(() => {
      this.loading = false;
    }, 1000);
    this.loading = true;
  },
  computed:{
  },
  mounted() {
    $(document).ready(function () {
      var whei = $(window).width();
      $("html").css({ fontSize: whei / 20 });
      $(window).resize(function () {
        var whei = $(window).width();
        $("html").css({ fontSize: whei / 20 });
      });
    });
    //基本信息
    this.getEchartData(); //左侧柱状图
    this.getPieData(); //左侧饼图
    this.getCategory(); //左侧面积图
    this.initLiquidEchart();//右侧水波图
    this.getStudent();//右侧柱状图
    //师资力量
    this.getPieData2(); 
    //招生信息
    this.getPieData3();
    this.getBarData(); //左侧柱状图
  },
  methods: {
    select(index){
      this.activeNum = index
    },
    // 基本信息
    getEchartData() {
      let myChart = this.$echarts.init(document.getElementById("chart"));
      var option = {
        // legend: {},
        // tooltip: {},
        dataZoom: [
          {
            // 第一个 dataZoom 组件
            type: "inside",
            xAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个 xAxis
            startValue: 0, // 数据窗口范围的起始数值index
            endValue: 4, // 数据窗口范围的结束数值index，即一次性展示多少个
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#dddc6b",
            },
          },
        },
        legend: {
          left: 10,
          top: 15,
          itemWidth: 12,
          itemHeight:8,
          data: ["学生", "老师"],
          textStyle: {
            color: "rgba(255,255,255,1)",
            fontSize: 10,
          },
          
        },
        // 图例位置
        grid: {
          left: "1%",
          top: "15%",
          right: "0%",
          bottom: "13%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [2016, 2017, 2018, 2019, 2020, 2021, 2022],
          axisTick: {
            show: false, 
          },
          axisLine:{
            lineStyle: {color: '#1BB3D9'}
          },
          // boundaryGap:'0px'
        },
        yAxis: {
          axisLine: {
            show: false, 
          },
          axisTick: {
            show: false, 
          },
          axisLabel:{
					  show: false
				  },
          splitLine:{
			　　　show: false
			　　},
        },
        series: [
          {
            name: "学生",
            type: "bar",
            data: [99, 105, 122, 133, 143, 153, 167],
            smooth: true,
            symbol: "circle",
            barWidth: 15, //粗细设置
            barGap: '100%',//间隔设置
            lineStyle: {
              normal: {
                color: "#0184d5",
                width: "2px",
              },
            },
            itemStyle: {
              normal: {
                color: "rgb(1,132,213,1)",
                // color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: "12px",
                // color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                //   offset: 0,
                //   color: 'rgb(2,12,18,0.5)' // 0% 处的颜色
                // },{
                //   offset: 1,
                //   color: "rgb(32,226,233,0.5)" // 100% 处的颜色
                // }], false)
              },
            },
            label:{
              show:true,//是否显示数值 
        　　　position: 'top',//显示位置 
              fontSize:'8'
            }
          },
          {
            name: "老师",
            type: "bar",
            data: [66, 73, 85, 99, 113, 125, 130],
            smooth: true,
            symbol: "circle",
            barWidth: 15, //粗细设置
            barGap: '80%',//间隔设置
            symbolSize: "5px",
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#00d887",
                width: "2px",
              },
            },
            itemStyle: {
              normal: {
                color: "rgb(0,216,135,1)",
                // color: "#00d887",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: "12px",
                // color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                //   offset: 0,
                //   color: 'rgb(255,255,255,0.5)' // 0% 处的颜色
                // },{
                //   offset: 1,
                //   color: "rgb(255,60,60,0.5)" // 100% 处的颜色
                // }], false)
              },
            },
            label:{
              show:true,//是否显示 
        　　  position: 'top',//显示位置 
              fontSize:'8'
            }
          },
        ],
        textStyle: {
          color: "#fff", // 标题颜色
        },
      };
      option && myChart.setOption(option);
      window.addEventListener(
        "resize",
        () => {
          myChart.resize();
        },
        false
      );
      setInterval(() => {
        if (option.dataZoom[0].endValue == option.series[0].data.length - 1) {
          option.dataZoom[0].endValue = 4;
          option.dataZoom[0].startValue = 0;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option);
      }, 3000);
    },
    getPieData() {
      let myChart1 = this.$echarts.init(document.getElementById("pie"));
      var option;
      option = {
        series: [
          {
            name: " ",
            type: "pie",
            radius: ["55%", "65%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "学生" },
              { value: 735, name: "老师" },
            ],
            color: ["rgb(27,241,236)", "rgb(134,90,249)"],
          },
        ],
      };
      option && myChart1.setOption(option);
      window.addEventListener(
        "resize",
        () => {
          myChart1.resize();
        },
        false
      );
      let index = 0;
      setInterval(() => {
        if (index == this.stu.length - 1) {
          index = 0;
          option.series[0].data[0].value = this.stu[index];
          option.series[0].data[0].name = "学生";
          this.thisStu = this.stu[index];
          option.series[0].data[1].value = this.teather[index];
          option.series[0].data[1].name = "教师";
          this.thisTeather = this.teather[index];
          this.thisyear = this.year[index];
        } else {
          index += 1;
          option.series[0].data[0].value = this.stu[index];
          option.series[0].data[0].name = "学生";
          this.thisStu = this.stu[index];
          option.series[0].data[1].value = this.teather[index];
          option.series[0].data[1].name = "教师";
          this.thisTeather = this.teather[index];
          this.thisyear = this.year[index];
        }
        myChart1.setOption(option);
      }, 3000);
    },
    getCategory() {
      let myChart2 = this.$echarts.init(document.getElementById("category"));
      var option;

      option = {
        grid: {
          //设置图表四周留白间距
          top: "28%",
          right: "1%",
          bottom: "15%",
          left: "11%",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          // data: ["2018", "2019", "2020", "2021", "2022"],
          data: this.year,
          axisTick: {
            show: false, 
          },
          axisLine:{
            lineStyle: {color: '#9B9D9D'}
          },
          axisLabel: {
            rotate: 40,
            fontSize: 10
          }
        },
        yAxis: {
          type: "value",
          name: "数量（人）",
          // nameGap: '25',
          nameTextStyle: {
              padding: [0, 0, 12, -12] // 上右下左与原位置距离
          },
          max: 3000, //最大刻度值
          interval: 500, //刻度值间隔值
          splitLine: {
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              color: "rgb(255,255,255,0.1)", //网格线颜色
            },
          },
          axisTick: {
            show: false, 
          },
          axisLine: {
            show: false, 
          },
        },
        series: [
          {
            data: [600, 1500, 1000, 1700, 1400, 1900, 2000],
            type: "line",
            lineStyle: {
              width: 2, //外边线宽度
              color: "rgb(50,77,183)", //外边线颜色
            },
            areaStyle: {
              //区域填充渐变颜色
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(50,77,183,0.8)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(50,77,183,0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            itemStyle: {
              normal: {
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 8,
              },
            },
          },
        ],
        textStyle: {
          color: "#fff", // 标题颜色
        },
      };
      option && myChart2.setOption(option);
      window.addEventListener(
        "resize",
        () => {
          myChart2.resize();
        },
        false
      );
      // console.log('option',option)
      console.log("area", this.area);
      let index = 0;
      setInterval(() => {
        if (index == this.area.length - 1) {
          index = 0;
          option.series[0].data = this.area[index];
          this.thismajor = this.major[index];
        } else {
          index += 1;
          option.series[0].data = this.area[index];
          this.thismajor = this.major[index];
        }
        myChart2.setOption(option);
      }, 3000);
    },
    initLiquidEchart() {
      var liquid = this.$echarts.init(document.getElementById("liquidEchart"));
      liquid.setOption({
        series: [
          {
            type: "liquidFill", //类型
            label:{
              normal:{
                formatter: '学生总数\n12345',
                textStyle:{
                  fontSize: 13,
                  color: 'rgb(255,255,255,0.7)'
                }
              }
            },
            data: [0.7, 0.5, 0.4], //数据是个数组 数组的每一项的值是0-1
            outline: {
              //show: true , //是否显示轮廓 布尔值
              borderDistance: 0, //外部轮廓与图表的距离 数字
              itemStyle: {
                //borderColor:'rgba(255,0,0,0.09)', //边框的颜色
                borderWidth: 0, //边框的宽度
                //shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                //shadowColor: '#000' //外部轮廓的阴影颜色
              },
            },
            backgroundStyle: {
              color: "rgba(69,96,130,0.5)", //图表的背景颜色
              //borderWidth: '10',//图表的边框宽度
              //borderColor: '#000',//图表的边框颜色
              itemStyle: {
                shadowBlur: 100, //设置无用
                shadowColor: "#f60", //设置无用
                opacity: 1, //设置无用
              },
            },
            itemStyle: {
              opacity: 0.5, //波浪的透明度
              shadowBlur: 10, //波浪的阴影范围
              shadowColor: "rgb(33,116,186,0.5)", //阴影颜色
            },
            emphasis: {
              itemStyle: {
                opacity: 1, //鼠标经过波浪颜色的透明度
              },
            },
            color: [
              "rgb(179,229,252)",
              "rgb(6,147,227)",
              "rgb(187,222,251)",
            ], //水波的颜色 对应的是data里面值
            shape: "circle", //水填充图的形状 circle默认圆形  rect圆角矩形  triangle三角形  diamond菱形  pin水滴状 arrow箭头状  还可以是svg的path
            center: ["50%", "50%"], //图表相对于盒子的位置 第一个是水平的位置 第二个是垂直的值 默认是[50%,50%]是在水平和垂直方向居中 可以设置百分比 也可以设置具体值
            radius: "80%", //图表的大小 值是圆的直径 可以是百分比 也可以是具体值 100%则占满整个盒子 默认是40%; 百分比下是根据宽高最小的一个为参照依据
            amplitude: 3, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
            waveLength: "50%", //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
            phase: 0, //波的相位弧度 默认情况下是自动
            period: (value, index) => {
              //控制波的移动速度 可以是函数 也可以是数字 两个参数  value 是data数据里面的值 index 是data值的索引
              return index * 2000;
            },
            direction: "left", //波移动的速度 两个参数  left 从右往左 right 从左往右
            waveAnimation: true, //控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
            animationEasing: "linear", //初始动画
            animationEasingUpdate: "quarticInOut", //数据更新的动画效果
            animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
            animationDurationUpdate: 300, //数据更新动画的时长
          },
        ],
        //backgroundColor: 'rgba(255,0,0,0.1)'容器背景颜色
      });
    },
    getStudent(){
      let myChart3 = this.$echarts.init(document.getElementById("studntDetails"));
      let t = this;
      var option;
      option = {
        // tooltip: {},
        // legend: {},
        grid: {
          top: '10%',
          left: '6%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLine: {
            show: false, 
          },
          axisTick: {
            show: false, 
          },
          axisLabel:{
					  show: false
				  },
          splitLine:{
			　　　show: false
			　　},
        },
        yAxis: [
          {
            type: 'category',
            data: ['一年级', '二年级', '三年级', '四年级'],
            inverse:true,//数组翻转显示
            axisLine: {
              show: false, 
            },
            axisTick: {
              show: false, 
            },
            axisLabel:{
              color:'#fff',
              fontSize: 10
            },
          },
          {
            type: 'category',
            data: [1234, 667, 789, 789],
            inverse:true,//数组翻转显示
            axisTick: {
              alignWithLabel: true,
              show:false
            },
            axisLabel:{
              color:'#fff',
              fontSize: 10
            },
            axisLine:{
              show:false//不显示y轴的线
            },
            position: 'right',
          }
        ],
        series: [
          {
            name:'',//背景
            type: 'bar',
            yAxisIndex:0,
            data: [1300, 1300, 1300, 1300],
            label:{
              show:false,
            },
            itemStyle:{
              color:"rgb(111,109,109,.2)",
            },
            barWidth:'40%',//设置宽度
          },
          {
            name:'',
            type: 'bar',
            yAxisIndex:1,
            data: [1234, 667, 789, 789],
            label:{
              show:false,
            },
            barWidth:'40%',
            itemStyle:{
              normal:{   
                color: function (params) {
                  console.log(params);
                  var colorList = [
                    ['#124F77', '#1A959C'],
                    ['#F63737', '#F6B937'],
                    ['#77A1F7', '#9377F7'],
                    ['#F7778C', '#F777C8']
                  ];
                  var colorItem = colorList[params.dataIndex];
                  return new t.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: colorItem[0]
                    },
                    {
                      offset: 1,
                      color: colorItem[1]
                    }
                  ], false);
                }
              }
            }
          },
        ]
      };
      option && myChart3.setOption(option);
      window.addEventListener(
        "resize",
        () => {
          myChart3.resize();
        },
        false
      );
    },
    // 师资力量
    getPieData2() {
      let myChart4 = this.$echarts.init(document.getElementById("pie2"));
      var option;
      option = {
        series: [
          {
            name: " ",
            type: "pie",
            radius: ["73%", "85%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1567, name: "满勤" },
              { value: 121, name: "迟到" },
              { value: 500, name: "早退" }
            ],
            color: ["#03FFB1", "#F8B700","#FF5A66"],
          },
        ],
      };
      option && myChart4.setOption(option);
      window.addEventListener(
        "resize",
        () => {
          myChart4.resize();
        },
        false
      );
      let index = 0;
      setInterval(() => {
        if (index == this.late.length - 1) {
          index = 0;
          option.series[0].data[0].value = this.fullAttendance[index];
          option.series[0].data[0].name = "满勤";
          option.series[0].data[1].value = this.late[index];
          option.series[0].data[1].name = "迟到";
          option.series[0].data[2].value = this.leaveEarly[index];
          option.series[0].data[2].name = "早退";
          this.showindex = index
          this.thisFullAttendance =  this.fullAttendance[index]
          this.thisLate = this.late[index]
          this.thisLeaveEarly = this.leaveEarly[index];
        } else {
          index += 1;
          option.series[0].data[0].value = this.fullAttendance[index];
          option.series[0].data[0].name = "满勤";
          option.series[0].data[1].value = this.late[index];
          option.series[0].data[1].name = "迟到";
          option.series[0].data[2].value = this.leaveEarly[index];
          option.series[0].data[2].name = "早退";
          this.showindex = index
          this.thisFullAttendance =  this.fullAttendance[index]
          this.thisLate = this.late[index]
          this.thisLeaveEarly = this.leaveEarly[index];
        }
        myChart4.setOption(option);
      }, 3000);
    },
    // 招生信息
    getPieData3() {
      let myChart5 = this.$echarts.init(document.getElementById("pie3"));
      var option;
      option = {
        series: [
          {
            name: " ",
            type: "pie",
            radius: ["55%", "65%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: this.men, name: "男生" },
              { value: this.women, name: "女生" },
            ],
            color: ["rgb(27,241,236)", "rgb(134,90,249)"],
          },
        ],
      };
      option && myChart5.setOption(option);
      window.addEventListener(
        "resize",
        () => {
          myChart5.resize();
        },
        false
      );
    },
    getBarData() {
      let myChart6 = this.$echarts.init(document.getElementById("bar"));
      var option = {
        color:['#20E2E9','#00d887'],
        dataZoom: [
          {
            type: "inside",
            xAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个 xAxis
            startValue: 0, // 数据窗口范围的起始数值index
            endValue: 4, // 数据窗口范围的结束数值index，即一次性展示多少个
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#dddc6b",
            },
          },
        },
        legend: {
          left: 10,
          top: 15,
          itemWidth: 12,
          itemHeight:8,
          data: ["男生", "女生"],
          textStyle: {
            color: "rgba(255,255,255,1)",
            fontSize: 10,
          },
          
        },
        // 图例位置
        grid: {
          left: "1%",
          top: "15%",
          right: "0%",
          bottom: "13%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [2016, 2017, 2018, 2019, 2020, 2021, 2022],
          axisTick: {
            show: false, 
          },
          axisLine:{
            lineStyle: {color: '#1BB3D9'}
          },
          // boundaryGap:'0px'
        },
        yAxis: {
          axisLine: {
            show: false, 
          },
          axisTick: {
            show: false, 
          },
          axisLabel:{
					  show: false
				  },
          splitLine:{
			　　　show: false
			　　},
        },
        series: [
          {
            name: "男生",
            type: "bar",
            data: this.menList,
            smooth: true,
            symbol: "circle",
            barWidth: 15, //粗细设置
            barGap: '100%',//间隔设置
            lineStyle: {
              normal: {
                color: "#20E2E9",
                width: "2px",
              },
            },
            itemStyle: {
              normal: {
                // color: "rgb(1,132,213,1)",
                // color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: "12px",
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgb(27, 207, 217, 0.1)' // 0% 处的颜色
                },{
                  offset: 1,
                  color: "rgb(32, 226, 233, 1)" // 100% 处的颜色
                }], false)
              },
            },
            label:{
              show:true,//是否显示数值 
        　　　position: 'top',//显示位置 
              fontSize:'8'
            }
          },
          {
            name: "女生",
            type: "bar",
            data: this.womenList,
            smooth: true,
            symbol: "circle",
            barWidth: 15, //粗细设置
            barGap: '80%',//间隔设置
            symbolSize: "5px",
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#00d887",
                width: "2px",
              },
            },
            itemStyle: {
              normal: {
                // color: "rgb(0,216,135,1)",
                // color: "#00d887",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: "12px",
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgb(137, 88, 255, 0)' // 0% 处的颜色
                },{
                  offset: 1,
                  color: "rgb(137, 88, 255, 1)" // 100% 处的颜色
                }], false)
              },
            },
            label:{
              show:true,//是否显示 
        　　  position: 'top',//显示位置 
              fontSize:'8'
            }
          },
        ],
        textStyle: {
          color: "#fff", // 标题颜色
        },
      };
      option && myChart6.setOption(option);
      window.addEventListener(
        "resize",
        () => {
          myChart6.resize();
        },
        false
      );
      setInterval(() => {
        if (option.dataZoom[0].endValue == option.series[0].data.length - 1) {
          option.dataZoom[0].endValue = 4;
          option.dataZoom[0].startValue = 0;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart6.setOption(option);
      }, 3000);
    },
  },
};
</script>

<style>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*,body {
  padding: 0px;
  margin: 0px;
  color: #222;
  font-family: "微软雅黑";
}

body {
  background: #010827 url(../../assets/images/bg1.jpg) center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #666;
  font-size: 0.1rem;
  overflow: hidden;
}

a {
  text-decoration: none;
  color: #399bff;
}

a.active,
a:focus {
  outline: none !important;
  text-decoration: none;
}

a:hover {
  color: #06c;
  text-decoration: none !important;
}

/*谷哥滚动条样式*/

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  position: absolute;
}

::-webkit-scrollbar-thumb {
  background-color: #5bc0de;
}

::-webkit-scrollbar-track {
  background-color: #ddd;
}

.alltitle {
  width: 1rem;
  background-color: #055A8B;
  margin: 0.15rem 0 0.05rem 0;
  border-left: rgb(27,233,231) 0.03rem solid;
  font-size: 0.17rem;
  color: rgb(255, 255, 255, 1);
  text-align: center;
}

.circular {
  position: absolute;
  border-radius: 50%;
  background-image: radial-gradient(
    rgb(255, 255, 255, 0) 60%,
    rgb(13, 184, 179, 0.9)
  );
  width: 1.4rem;
  height: 1.4rem;
  margin: 6.8% 0 0 10.5%;
}

.circular1 {
  position: absolute;
  border-radius: 50%;
  background-image: radial-gradient(
    rgb(255, 255, 255, 0) 55%,
    rgb(13, 184, 179, 0.9)
  );
  width: 0.8rem;
  height: 0.8rem;
  margin: 19.7% 0 0 23%;
}


#liquidEchart {
  width: 90px;
  height: 90px;
  background-image: radial-gradient(
    rgb(255, 255, 255, 0) 55%,
    #2B5D96
  );
  border-radius: 50%;
}
.leftside{
  height: 8.7rem;
  background: url(../../assets/images/left.png) no-repeat center center ;
  background-size: 100% 100%;
  margin-left: 0.1rem;
  margin-top: -0.15rem;
  position: relative;
  animation: showLeft 1s;
}
@keyframes showLeft {
  from{
    left: -100rem
  }
  to{
    left: 0;
  }
}
.part1{
  margin: 0.4rem 0 0 0.2rem;
  float: left;
  position: relative;
  animation: showLeft 1.4s;
}
.part2{
  margin: -0.27rem 0 0 0.2rem;
  float: left;
  position: relative;
  animation: showLeft 1.2s;
}
.part3{
  margin: -0.27rem 0 0 0.2rem;
  float: left;
  position: relative;
  animation: showLeft 1.6s;
}
.rightside{
  height: 8.7rem;
  background: url(../../assets/images/right.png) no-repeat center center ;
  background-size: 100% 100%;
  margin-right: 0.1rem;
  margin-top: -0.15rem;
  position: relative;
  animation: showRight 1s;
}
@keyframes showRight {
  from{
    right: -100rem
  }
  to{
    right: 0;
  }
}
.part4{
  margin: 0.4rem 0 0 0.2rem;
  float: left;
  position: relative;
  animation: showRight 1.4s;
}
.part4_box{
  /* background-color: #5bc0de; */
  background: url(../../assets/images/schoolInfo.png) no-repeat center center ;
  background-size: 101% 100%;
  height: 2rem;
  width: 4.48rem;
}
.part5{
  margin: 0rem 0 0 0.2rem;
  float: left;
  position: relative;
  animation: showRight 1.2s;
}
.part6{
  margin: 0rem 0 0 0.2rem;
  float: left;
  position: relative;
  animation: showRight 1.6s;
}
.showTeacher {
  background: url(../../assets/images/userbg.png) no-repeat center center ;
  background-size: 101% 100%;
  /* background-color: rgb(42, 78, 121, 0.6); */
  width: 1.2rem;
  height: 1.7rem;
  margin: 0.1rem 0 0 0;
  text-align: center;
}
.itemactive{
  color: #FEDE7F;
  line-height: 0.4rem;
  cursor: pointer;/* 将鼠标更改为点击样式 */
}

.itemnomal{
  color: #fff;
  line-height: 0.4rem;
  cursor: pointer;
}
.navLink{
  position: relative;
  animation: showNav 1.77s;
}
@keyframes showNav{
  from {
    bottom: -200rem;
  }
  to {
    bottom: 0;
  }
}
.teachertype1{
  font-weight: bold;
  background-image: linear-gradient(
    #fff,
    #fff,
    rgb(167, 222, 245),
    #44B2F5 
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent; /*需要文字透明*/
  font-size: 0.3rem;
  margin: 0.3rem 0 0 0.6rem;
  float: left;
}
.teachertype2{
  font-weight: bold;
  background-image: linear-gradient(
    #fff,
    #fff,
    rgb(245, 215, 167),
    #FF9763
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent; /*需要文字透明*/
  font-size: 0.3rem;
  margin: 0.3rem 0 0 0.6rem;
  float: left;
}
.teachertype3{
  font-weight: bold;
  background-image: linear-gradient(
    #fff,
    #fff,
    rgb(167, 245, 185),
    #30BC37
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent; /*需要文字透明*/
  font-size: 0.3rem;
  margin: 0.3rem 0 0 0.6rem;
  float: left;
}
.circular2 {
  position: absolute;
  border-radius: 50%;
  background-image: radial-gradient(
    rgb(255, 255, 255, 0) 60%,
    rgb(88, 188, 249, 0.9)
  );
  width: 1.9rem;
  height: 1.9rem;
  margin: 2.92% 0 0 0.6%;
}

.circular3 {
  position: absolute;
  border-radius: 50%;
  background-image: radial-gradient(
    rgb(255, 255, 255, 0) 55%,
    rgb(88, 188, 249, 0.9)
  );
  width: 1.15rem;
  height: 1.15rem;
  margin: 10.7% 0 0 8.8%;
}
.activeindex{
  color: #1BB3D9;
  background: url(../../assets/images/selectbg.png) no-repeat center center ;
  background-size: 107% 120%;
  line-height: 0.29rem;
}
.nomalindex{
  color: #fff;
  line-height: 0.29rem;
}
.studentList{
   color:#A9D8FF;
   background: url(../../assets/images/studentList.png) no-repeat center center;
   background-size: 100% 100%;
   margin: 0.1rem 0;
   height: 0.26rem;
   line-height: 0.26rem;
}
</style>